<template>
<div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>问卷管理</el-breadcrumb-item>
      <el-breadcrumb-item>问卷列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="margin-top: 15px">
  <!--    表格上的搜索栏-->
      <div>
        <el-row :gutter="20">
			<el-col :span="3">
			 <el-select    v-model="type" @change="changeType" clearable placeholder="请选择问卷类型">
					<!-- 当选择查看全部类型的或，就上传 为空"" -->
			        <el-option label="全部类型" value="" ></el-option>
			        <el-option v-for="item in typeList" :label="item.msg" :value="item.id"></el-option>
			 </el-select>
			</el-col>
        </el-row>
      </div>
  <!--    表格-->
      <el-table  :data="questionList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="问卷名称" prop="theme" width="200px" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column label="具体描述" prop="content" width="200px" :show-overflow-tooltip='true' ></el-table-column>
        <el-table-column label="题目数量" prop="topicNumb" width="200px" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column label="问卷类型" prop="msg" width="200px" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column label="结束时间" prop="overTime" width="200px" :show-overflow-tooltip='true'>
          <template scope="scope">
            {{scope.row.overTime.toString().substring(0,10)}}
          </template>
        </el-table-column>
		    <el-table-column label="是否为模板">
          <template slot-scope="scope">
            <el-button type="success" @click="changeIsDemo(scope.row)" icon="el-icon-check"  circle v-if="scope.row.isDemo==1"></el-button>
            <el-button type="danger"  @click="changeIsDemo(scope.row)" icon="el-icon-close"  circle v-if="scope.row.isDemo==0"></el-button>
			    </template>
		    </el-table-column>
        <el-table-column label="操作" >
          <!--          作用域插槽 scope.id就可以用来删除-->
          <template slot-scope="scope">
            <!-- 删除按钮 -->
            <el-tooltip effect="dark" content="删除问卷" placement="top-start" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeQuestion(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"  :current-page="queryInfo.current"
                     :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.total">
      </el-pagination>
    </el-card>


</div>
</template>


<script>
import axios from "axios";
export default {
  name: "questionnaire",
  data(){
    return{
      //查询对象
      queryInfo:{
        //搜索类型
        type:'',
        //当前页面
		    current:1,
		//当前页的数据数量
        size:5,
		//数据总数量
		    total: 10
      },
      //这个活动数组，用来存储后端来的数据
      questionList:[],
	  //类型列表
	    typeList:[],
	  //要选取的列表
	    type:"",
	    editQuestion:"",
    }
  },
  //一开始就加载方法
  created() {
	  //加载问卷的数据
	  this.getQuestionList();
	  //加载类型列表
	  this.getTypeList();
  },

  methods:{
    //分页查询得到活动列表
    getQuestionList(){
      var this_=this;
	  axios.get("question/findAll/"+this.queryInfo.current+'/'+this.queryInfo.size).then(ret => {
	    if (ret.flag) {
	  	//显示数据，就是绑定对象数组
	  	this_.questionList = ret.data.rows;


	  	this_.queryInfo.total = ret.data.total;
	    } else {
	  	this_.$message.success("查询失败");
	    }
	  })
    },
	//通过类型来选择出问卷列表来
	getTypeChageToQuestionList(){
		var this_=this;
		axios.get("question/findType/"+this.queryInfo.current+'/'+this.queryInfo.size+'/'+this.type).then(ret => {
		  if (ret.flag) {
			//显示数据，就是绑定对象数组
			this_.questionList = ret.data.rows;
      //重新赋值结束时间
      for(var i=0;i<this_.questionList.length;i++){
        this_.questionList[i].overTime=this_.questionList[i].overTime.substring(0,10);
      }
			this_.queryInfo.total = ret.data.total;
		  } else {
			this_.$message.success("查询失败");
		  }
		})
	},
	//用来查后端问卷列表（逻辑判断：是使用类型来查出问卷数据
	//还是没有类型条件来查出数据）
	judgeFindQuestionMode(){
		if(this.type!=""){//这是类型选择不为空（查出相对应的数据）
			this.getTypeChageToQuestionList();
		}else{ //查出所有类型的数据
			this.getQuestionList();
		}

	},
	//得到问卷类型的列表
	getTypeList(){
		var this_=this;
		axios.get("type/all").then(ret => {
		  if (ret.flag) {
			//显示数据，就是绑定对象数组
			this_.typeList=ret.data;
		  } else {
			  this_.$message.success("查询列表失败");
		  }
		})
	},
	//活动类型选择框(选择不同类型)发生了变化之后调用的方法
	changeType(){
		//一旦选择了不同的类型
		this.queryInfo.current=1;
		//发送请求，得到数据
		this.judgeFindQuestionMode();
	},
    handleSizeChange(size){
      //currentSize分页栏 选择的每页几行数据
		this.queryInfo.size=size;
      //1.调用发送axios 请求，重新得到问卷列表
		this.judgeFindQuestionMode();
    },
    handleCurrentChange(current){
      //currentPage改变后选择的那一页
		this.queryInfo.current=current;
      //1.调用发送axios 请求，重新得到活动列表
		this.judgeFindQuestionMode();
    },
    //点级了删除按钮,删除活动
    removeQuestion(id){
		//删除一个问卷
		  this.$confirm("此操作将永久删除该问卷, 是否继续?",'提示', {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			  })
			  .then(() => {
			   var this_=this;
			   axios.post("question/removeQuestion/"+id).then(ret => {
				 if (ret.flag) {
				//显示数据，就是绑定对象数组
					this_.$message.success("删除问卷成功");
					this_.getUserList();
				 } else {
						this_.$message.error("删除问卷失败");
				 }
			   })
			  })
			  .catch(() => {
			   this.$message.success("已取消删除");
					}) ;
    },
    //修改是否模板的异步请求方法
    editIsDemo(qut){
      var this_=this;
      axios.post("question/editQuestion",qut).then(ret => {
        if (ret.flag) {
          this_.$message.success("修改成功");
        } else {
          this_.$message.success("查询列表失败");
        }
      })
    },
    //点击修改模板按钮调用的方法
    changeIsDemo(qut){
      if(qut.isDemo===0){
          //使其模板键转换为1
          qut.isDemo=1;
          //发送异步请求
          this.editIsDemo(qut);
          //重新刷新页面

      }else{
        //使其模板键转换为0
          qut.isDemo=0;
          //发送异步请求
          this.editIsDemo(qut);
          //重新刷新页面
          // location.reload();
      }
    }

  }
}




</script>

<style scoped lang="less">
.el-table{
  margin-top: 15px;
}


.el-pagination{
  margin-top: 15px;
}
</style>
